import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../pages/Home.vue";
import Index from "../pages/Index.vue";
import Product from "../pages/Product.vue";
import Detail from "../pages/Detail.vue";
import Cart from "../pages/Cart.vue";
import Order from "../pages/Order.vue";
import OrderConfirm from "../pages/OrderConfirm.vue";
import OrderList from "../pages/OrderList.vue";
import OrderPay from "../pages/OrderPay.vue";
import Alipay from "../pages/Alipay.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
    redirect: "/index",
    children: [
      {
        path: "/index",
        name: "index",
        component: Index,
      },
      {
        path: "/product/:id",
        name: "iproduct",
        component: Product,
      },
      {
        path: "/detail/:id",
        name: "detail",
        component: Detail,
      }
        ]
      },{
        path: "/cart",
        name: "cart",
        component: Cart,
      },
      {
        path: "/order",
        name: "order",
        component: Order,
        children: [
          {
            path: "list",
            name: "order-list",
            component: OrderList,
          },
          {
            path: "confirm",
            name: "order-confirm",
            component: OrderConfirm,
          },
          {
            path: "pay",
            name: "order-pay",
            component: OrderPay,
          },{
            path: "alipay",
            name: "alipay",
            component: Alipay,
          }
    ],
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  routes,
});

export default router;
